<template>
   <div>
        <h1>待办事项</h1>
        <div class="common-layout">
            <el-container>
                <el-header><SonHeader @add="addHandle"/></el-header>
                <el-main><SonMain :list="list"/></el-main>
                <el-footer><SonFooter :list="list"/></el-footer>
            </el-container>
        </div>
   </div>
</template>

<script>
import SonFooter from '@/components/ToDo/SonFooter.vue';
import SonHeader from '@/components/ToDo/SonHeader.vue';
import SonMain from '@/components/ToDo/SonMain.vue';

export default{
    components:{
        SonHeader,
        SonMain,
        SonFooter
    },
    created(){
        this.copyList = this.list.slice()
    },
    data() {
        return {
            list:[
                {                 
                    id: '2016-05-03',
                    content: 'Tom',
                    startDate: 'No. 189, Grove St, Los Angeles',
                    finishDate:1,
                },
                {
                    id: '2016-05-02',
                    content: 'Tom',
                    startDate: 'No. 189, Grove St, Los Angeles',
                    finishDate:2,
                },
                {
                    id: '2016-05-04',
                    content: 'Tom',
                    startDate:  'No. 189, Grove St, Los Angeles',
                    finishDate:3,
                },
                {
                    id:'2016-05-01',
                    content: 'Tom',
                    startDate:  'No. 189, Grove St, Los Angeles',
                    finishDate:4,
                },
            ],
            now:new Date(),
            copyList:[]
        }
    },
    methods: {
        addHandle(val){
            this.list.push({id:+new Date(),
                            content:val,
                            startDate:this.fomateData,
                            finishDate:''
            })
            this.copyList = this.list.slice()
        },
        changeHandle(i){
            this.list[i].finishDate=this.fomateDate
            this.copyList = this.list.slice()
        },
        delHandle(i){
            this.list.splice(i,1)
            this.copyList = this.list.slice()
        },
        showHandle(v){
            if(v=='all'){
                this.list = this.copyList.slice()
            }else if(v=='done'){
                this.list = this.copyList.filter( v=> v.state == true)
            }else if(v=='undo'){
                this.list = this.copyList.filter( v=> v.state == false)
            }else{
                this.list = [],
                this.copyList=[]
            }
        }
    },
    computed: {
        fomateData(){
            let momth = this.now.getMonth() + 1
            return this.now.getFullYear() + '-' + momth + '-' + this.now.getDate()

        }
    },
}
</script>

<style>
#app{
    width:800px;
    /*居中 */
    margin: auto;
}
</style>